Gradiant Card

  • STEPS

    1. html

    
                 



   
    <div class="col-md-3 col-sm-12 col-xs-12 biright">       
        <h3>Upper Limb</h3>
        <p class="description">Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
        
     </div>

    2. css

    


               





                .biright {
  text-align:center;
  padding: 20px !important;
  background: rgba(254, 89, 149, 1);
  background: -moz-linear-gradient(-45deg, rgba(254, 89, 149, 1) 0%, rgba(222, 164, 29, 1) 100%);
  background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(254, 89, 149, 1)), color-stop(100%, rgba(222, 164, 29, 1)));
  background: -webkit-linear-gradient(-45deg, rgba(254, 89, 149, 1) 0%, rgba(222, 164, 29, 1) 100%);
  background: -o-linear-gradient(-45deg, rgba(254, 89, 149, 1) 0%, rgba(222, 164, 29, 1) 100%);
  background: -ms-linear-gradient(-45deg, rgba(254, 89, 149, 1) 0%, rgba(222, 164, 29, 1) 100%);
  background: linear-gradient(135deg, rgba(254, 89, 149, 1) 0%, rgba(222, 164, 29, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fe5995', endColorstr='#dea41d', GradientType=1);
}




.biright h3 {
  font-size: 17px;
  text-align: center;
  font-weight: 600;
  line-height: 17px;
  margin: 0;
  letter-spacing: .4px;
  padding: 0 0 10px 0;
  color: #fff;
}
.biright .description {
  padding: 0 0 10px 0;
  color: #fff;
  text-align: center;
}
.biright a {
  margin: 0 auto;
}